<template>
  <div class="main">
    <header-view/>
    <div class="article-info">
      <article-detail :article="article"/>
      <div class="comment">
        <div class="comment-form" v-if="article.isComment === 1">
          <el-divider>评论区</el-divider>
          <el-form :model="comment" :rules="rules" ref="comment" label-postion="right" label-width="100px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="comment.name" placeholder="请输入评论人姓名"/>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input type="textarea" v-model="comment.content" maxlength="300" show-word-limit :rows="5"
                        placeholder="请输入评论内容"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveComment">提交评论</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <h4 style="text-align: center;margin: 15px">本文章不支持评论！</h4>
        </div>
        <div class="comment-list" v-if="commentList.length > 0">
          <el-divider>评论列表</el-divider>
          <div style="width: 600px;margin: 20px auto;border-bottom: 1px solid yellowgreen" v-for="c in commentList"
               :key="c.commentId">
            <div style="display: flex;justify-content: space-between;margin-bottom: 15px">
              <h3>{{ c.name }}</h3>
              <p>{{ c.commentTime }}</p>
            </div>
            <p style="margin-bottom: 15px">{{ c.content }}</p>
          </div>
          <el-pagination hide-on-single-page :total="pageInfo.total" page-size="5" :current-page="pageInfo.page"
                         background layout="prev,pager,next,total" @current-change="currentChange"
                         style="text-align: center"/>
        </div>
        <div v-else>
          <h4 style="text-align: center;margin: 15px">暂无评论！</h4>
        </div>
      </div>
    </div>
    <footer-view/>
  </div>
</template>

<script>
import HeaderView from '@/components/HeaderView.vue'
import FooterView from '@/components/FooterView.vue'
import ArticleDetail from '@/components/ArticleDetail.vue'

export default {
  name: 'ArticleView',
  components: {
    HeaderView,
    FooterView,
    ArticleDetail
  },
  data () {
    return {
      article: {},
      comment: {
        name: '',
        content: '',
        articleId: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入内容',
          trigger: 'blur'
        }]
      },
      commentList: [],
      pageInfo: {
        page: 1,
        total: 0
      }
    }
  },
  methods: {
    init () {
      this.$http.get(`api/article/info/${this.comment.articleId}`).then(data => {
        this.article = data.data
        if (this.article.isComment === 1) {
          this.$http.get(`api/comment/${this.comment.articleId}/${this.pageInfo.page}`).then(data => {
            this.commentList = data.data.records
            this.pageInfo.page = data.data.current
            this.pageInfo.total = data.data.total
          })
        }
      })
    },
    saveComment () {
      this.$refs.comment.validate(valid => {
        if (valid) {
          this.$http.post('api/comment/save', this.comment).then(() => {
            this.$alert('发布成功，等待审核', { type: 'success' }).then(() => {
              this.comment.name = ''
              this.comment.content = ''
            })
          })
        }
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.init()
    },
    updateReadCount () {
      this.$http.post(`api/article/${this.comment.articleId}/read`).then()
    }
  },
  created () {
    this.comment.articleId = this.$route.query.articleId
    this.init()
    this.updateReadCount()
  }
}
</script>

<style scoped>
.article-info {
  padding-top: 70px;
  width: 780px;
  margin: 0 auto;
  min-height: calc(100vh - 150px);
}
</style>
